import React, { useState, useRef } from 'react';
import { connect } from 'dva';
import { Radio, Card, Button,  } from 'antd';
import { LineChartOutlined, BarChartOutlined, PieChartOutlined, DownloadOutlined } from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';

const indicatorTypes = {
    'a':60,
    'b':34,
    'c':16,
    'd':55,
    'e':60
};

const typesToKeys = {
    'a':'主机COP',
    'b':'冷却泵',
    'c':'冷却侧',
    'd':'冷却塔',
    'e':'冷冻泵'
};

function RadarChart({ data }) {
    data = indicatorTypes;
    let seriesData = [], indicator = [];
    Object.keys(data).forEach(key=>{
        indicator.push({ name:typesToKeys[key], max:100 });
        seriesData.push(data[key]);
    });
    return (    
        <ReactEcharts
            notMerge={true}
            style={{ width:'100%', height:'100%'}}
            option={{
                tooltip:{
                    trigger:'item'
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        // formatter:(value, indicator)=>{
                        //     return `${value}`
                        // },
                        textStyle: {
                            color: '#fff',
                            padding:4,
                            borderRadius:10,
                            fontSize:14,
                        }
                    },
                    radius:'65%',
                    splitNumber:5,
                    splitArea: {
                        show:false
                        // areaStyle: {
                        //     color: ['rgba(9, 193, 253, 0.2)']
                        // }
                    },
                    splitLine:{
                        lineStyle:{
                            width:1,
                            color:'#01396c'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            width:2,
                            color:'#0088dc'
                        }
                    },
                    indicator
                },                    
                series:{
                    type: 'radar',
                    name:'综合分析',
                    label:{
                        // distance:2
                    },
                    itemStyle:{
                        color:'#1bddff'
                    },
                    data: [
                        {
                            value: seriesData,
                            lineStyle:{
                                color:'#1bddff'
                            },
                            areaStyle:{
                                opacity:0.8,
                                color:{
                                    type:'radial',
                                    x:0.5,
                                    y:0.5,
                                    r:0.5,
                                    colorStops:[
                                        { offset:0, color:'transparent' },
                                        { offset:1, color:'#1bddff' }
                                    ]
                                }
                            }
                        }

                    ]
                }
            }}
        /> 
           
    );
}

export default React.memo(RadarChart);
